import React, { Component } from 'react';
import { Modal, Form, Input, InputNumber } from 'antd';

const FormItem = Form.Item;

class CustomizedForm extends Component {
    render() {
        const { visible, formData, onCancel, onCreate, form, okText, title } = this.props;
        const { getFieldDecorator } = form;
        const FormItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 16 },
        };
        return (
            <Modal
                visible={visible}
                title={title}
                okText={okText}
                cancelText='取消'
                onCancel={onCancel}
                onOk={onCreate}
            >
                <Form layout="horizontal">
                    <FormItem label="订单号" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('orderNumber', {
                            rules: [{ required: true, validator: this.checkName }],
                            initialValue: formData.orderNumber
                        })(
                            <Input />
                        )}
                    </FormItem>
                    <FormItem label="本金" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('orderPrincipal', {
                            rules: [{ required: true, message: '请输入数值类型的本金！' }],
                            initialValue: formData.orderPrincipal
                        })(
                            <InputNumber />
                        )}
                    </FormItem>
                    <FormItem label="佣金" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('orderCommission', {
                            rules: [{ required: true, message: '请输入数值类型的佣金！' }],
                            initialValue: formData.orderCommission
                        })(
                            <InputNumber />
                        )}
                    </FormItem>
                    <FormItem label="备注" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('orderRemarks', {
                            initialValue: formData.orderRemarks
                        })(
                            <Input />
                        )}
                    </FormItem>
                </Form>
            </Modal>
        );
    }
}

const CollectionCreateForm = Form.create()(CustomizedForm);
export default CollectionCreateForm;